<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;

            position: absolute;
            left: 206px;
            top: 150px;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: orange;

            position: absolute;
            left: 0;
            top: 130px;
        }
    </style>
</head>

<body>
    <div></div>
    <p></p>
    <script>
        // 获取元素 
        var div = document.querySelector('div');

        // div.onclick = () => {

        //     //获取当前元素的left值

        //     var timer = setInterval(() => {
        //         // 每次运动重新获取以此元素的left值
        //         var init = parseInt(window.getComputedStyle(div).left);
        //         // 定义一个变量 存放每次的运动距离  
        //         var duration = (600 - init) / 10;

        //         duration = duration > 0 ? Math.ceil(duration) : Math.floor(duration);
        //         // 判断是否达到目标
        //         if (init == 600) {
        //             clearInterval(timer)
        //         } else {
        //             div.style.left = init + duration + 'px';
        //         }

        //     }, 10)
        // }


        //上面的方案还是到不了目标值 
        // 初始值 206
        // 目标值 600

        // 600 - 206 = 394  
        // 394 / 10 = 39.4

        // 浏览器识别到1px 识别不了0.4 
        // 所以没法到达到目标 
        // 解决方案  取整

        // 大于0  向上取整
        // 如果往左移动 -0.4 向上取整  -0
        // 小于0  向下取整
        // -0.4 向下取整 -1 

        function sport(ele,types,target) {
      

                //获取当前元素的left值

                var timer = setInterval(() => {
                    // 每次运动重新获取以此元素的left值
                    var init = parseInt(window.getComputedStyle(ele)[types]);
                    // 定义一个变量 存放每次的运动距离  
                    var duration = (target - init) / 10;

                    duration = duration > 0 ? Math.ceil(duration) : Math.floor(duration);
                    // 判断是否达到目标
                    if (init == target) {
                        clearInterval(timer)
                    } else {

                        ele.style[types] = init + duration + 'px';
                    }

                }, 10)

            }

            var pele = document.querySelector('p');
            pele.onclick = () => {
                sport(pele,'left',600)
            }
    </script>
</body>

</html>